<template>
  <div class="environment-panel">
    <div class="weather-section">
      <div class="weather-display">
        <div class="weather-icon">
          <svg viewBox="0 0 24 24">
            <path :d="getWeatherIcon(data.weather)" fill="currentColor"/>
          </svg>
        </div>
        <div class="weather-info">
          <div class="temperature">{{ data.temperature }}</div>
          <div class="weather-desc">{{ getWeatherDesc(data.weather) }}</div>
        </div>
      </div>
    </div>
    
    <div class="env-metrics">
      <div class="metric-item">
        <div class="metric-icon">
          <svg viewBox="0 0 24 24">
            <path d="M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="metric-info">
          <div class="metric-label">湿度</div>
          <div class="metric-value">{{ data.humidity }}</div>
        </div>
      </div>
      
      <div class="metric-item">
        <div class="metric-icon">
          <svg viewBox="0 0 24 24">
            <path d="M14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12M12,3C16.18,3 19.5,6.32 19.5,10.5C19.5,12.38 18.75,14.09 17.5,15.31L17.42,15.38C16.42,16.34 15.5,17.12 14.64,17.74C14.09,18.12 13.56,18.43 13.04,18.68L12,19.5L10.96,18.68C10.44,18.43 9.91,18.12 9.36,17.74C8.5,17.12 7.58,16.34 6.58,15.38L6.5,15.31C5.25,14.09 4.5,12.38 4.5,10.5C4.5,6.32 7.82,3 12,3Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="metric-info">
          <div class="metric-label">PM2.5</div>
          <div class="metric-value" :class="getPM25Class(data.pm25)">{{ data.pm25 }}</div>
        </div>
      </div>
      
      <div class="metric-item">
        <div class="metric-icon">
          <svg viewBox="0 0 24 24">
            <path d="M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z" fill="currentColor"/>
          </svg>
        </div>
        <div class="metric-info">
          <div class="metric-label">空气质量</div>
          <div class="metric-value" :class="getAirQualityClass(data.airQuality)">{{ data.airQuality }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      temperature: '24°C',
      humidity: '65%',
      pm25: '优',
      airQuality: '良好',
      weather: 'sunny'
    })
  }
})

const getWeatherIcon = (weather) => {
  const icons = {
    'sunny': 'M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,2L14.39,5.42C13.65,5.15 12.84,5 12,5C11.16,5 10.35,5.15 9.61,5.42L12,2M3.34,7L7.5,6.65C6.9,7.16 6.36,7.78 5.94,8.5C5.52,9.22 5.25,10 5.11,10.79L3.34,7M3.36,17L5.12,13.23C5.26,14 5.53,14.78 5.95,15.5C6.37,16.22 6.91,16.84 7.51,17.35L3.36,17M20.65,7L18.88,10.79C18.74,10 18.47,9.22 18.05,8.5C17.63,7.78 17.09,7.15 16.49,6.64L20.65,7M20.64,17L16.5,17.36C17.1,16.85 17.64,16.22 18.06,15.5C18.48,14.78 18.75,14 18.89,13.21L20.64,17M12,22L9.59,18.56C10.33,18.83 11.14,19 12,19C12.86,19 13.67,18.83 14.41,18.56L12,22Z',
    'cloudy': 'M19.35,10.04C18.67,6.59 15.64,4 12,4C9.11,4 6.61,5.64 5.35,8.04C2.34,8.36 0,10.91 0,14A6,6 0 0,0 6,20H19A5,5 0 0,0 24,15C24,12.36 21.95,10.22 19.35,10.04Z',
    'rainy': 'M6,14L8,18L10,14H6M14.5,16L16.5,20L18.5,16H14.5M11,24L13,28L15,24H11M12,2A6,6 0 0,1 18,8C18,10.11 16.71,11.93 14.83,12.82L17,17H14L12.5,14.5L11,17H8L10.17,12.82C8.29,11.93 7,10.11 7,8A5,5 0 0,1 12,3Z'
  }
  return icons[weather] || icons['sunny']
}

const getWeatherDesc = (weather) => {
  const descriptions = {
    'sunny': '晴朗',
    'cloudy': '多云',
    'rainy': '小雨'
  }
  return descriptions[weather] || '晴朗'
}

const getPM25Class = (pm25) => {
  const classes = {
    '优': 'excellent',
    '良': 'good',
    '轻度污染': 'light',
    '中度污染': 'moderate',
    '重度污染': 'heavy'
  }
  return classes[pm25] || 'excellent'
}

const getAirQualityClass = (quality) => {
  const classes = {
    '优秀': 'excellent',
    '良好': 'good',
    '一般': 'moderate',
    '较差': 'poor'
  }
  return classes[quality] || 'good'
}
</script>

<style scoped>
.environment-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.weather-section {
  flex-shrink: 0;
}

.weather-display {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.weather-display:hover {
  background: rgba(0, 255, 136, 0.15);
  transform: translateY(-2px);
}

.weather-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 171, 64, 0.1);
  border-radius: 50%;
  color: #ffab40;
  flex-shrink: 0;
}

.weather-icon svg {
  width: 28px;
  height: 28px;
}

.weather-info {
  flex: 1;
}

.temperature {
  font-size: 1.4rem;
  font-weight: bold;
  color: #ffab40;
  text-shadow: 0 0 10px rgba(255, 171, 64, 0.5);
  margin-bottom: 0.2rem;
}

.weather-desc {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.env-metrics {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem;
  background: rgba(0, 255, 136, 0.06);
  border: 1px solid rgba(0, 255, 136, 0.15);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.metric-item:hover {
  background: rgba(0, 255, 136, 0.12);
  border-color: rgba(0, 255, 136, 0.3);
}

.metric-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 255, 136, 0.1);
  border-radius: 8px;
  color: #00ff88;
  flex-shrink: 0;
}

.metric-icon svg {
  width: 18px;
  height: 18px;
}

.metric-info {
  flex: 1;
}

.metric-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.2rem;
}

.metric-value {
  font-size: 1rem;
  font-weight: 600;
  color: #00ff88;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

.metric-value.excellent {
  color: #00ff88;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
}

.metric-value.good {
  color: #66bb6a;
  text-shadow: 0 0 8px rgba(102, 187, 106, 0.5);
}

.metric-value.moderate {
  color: #ffab40;
  text-shadow: 0 0 8px rgba(255, 171, 64, 0.5);
}

.metric-value.poor,
.metric-value.heavy {
  color: #ff7043;
  text-shadow: 0 0 8px rgba(255, 112, 67, 0.5);
}
</style> 